Suzuka(Flashもどき)のアクションスクリプト
アクションスクリプトとは、画面上のオブジェクトの動きを制御するプログラムです。アクションスクリプトは、次の3箇所に書くことができます。
(1) スプライト(Flashで言うとムービークリップ)
(2) ボタン
(3) アクションフレーム(Flashでは画像のフレームに書き込みますが、suzukaはレイヤーを独立させています:この方が分かり易い)
以下、この順で説明します。
第1章 スプライトに書く
オブジェクト(スプライト)の動きをすべてプログラムで書いてしまいます(タイムラインを使わない)。
手順は簡単で
(step1)レイヤーリストにスプライトを用意し、選択
(step2)画面右下に出る“スクリプトを編集”ボタンを押してエディターを立ち上げ、プログラム(アクションスクリプトを書き込みます)
(step3) f5で実行
簡単に言うと、スプライトに書くアクションスクリプトは図1のようになっています。
(不要なものは、書かなくてもよい)。
図1 スプライトのアクションスクリプト onCripEvent(load){ 最初の処理 } onClipEvent(EnterFrame){ 常に繰り返す処理 } on(press){ スプライト上でマウスボタンを押したときの処理 } on(release){ マウスボタンを放したときの処理 }
(例1.1)青丸を矢印キーで移動させる(実行前に画面をクリック)。
(説明)m.bmp(青丸)画像をスプライトにしてレイヤーリストに入れる。レイヤーリストのスプライトを選択すると画面右下に“スクリプトを編集”が現れる。“スクリプトを編集”をクリックすると、上図のスクリプトエディタが現れるので、スクリプトを書き込む。上で_xと_yは丸のx、y座標を表す(上のthisは、なくてもよい)。key.UPは上向き矢印キーを示す。
(スプライトにスクリプトを書く場合)タイムラインは使っていないことに御注目ください。
(例1.2)ボールをマウスでつかまえ投げることができる
これは、http://www.procreo.jp/tutorial01.html のサイトの例をsuzukaで作成したものです。スクリプトをオリジナルと変えているのは、on(release)を on(releaseOutside)としている点です。releaseOutsideはボタンを画像の外で放した時、という意味で、この方が勢いよくボールを飛ばせます。
スクリプトは、下に示すとおりで、図1のすべての機能を持っています。
スクリプトの作り方は、上のサイトに丁寧に説明されていますので、参考にしてください。
スクリプト全体は以下です。
onClipEvent (load) {
speedx = 5;
speedy = 4;
pickup = 0;
}
onClipEvent (enterFrame) {
if (pickup == 1) {
x1 = x2;
y1 = y2;
x2 = this._x;
y2 = this._y;
speedx = (x2-x1);
speedy = (y2-y1);
} else {
if (this._x>300-this._width/2) {
this._x = 300-this._width/2;
speedx = speedx*-1*0.8;
}
if (this._x<0+this._width/2) {
this._x = 0+this._width/2;
speedx = speedx*-1*0.8;
}
if (this._y>300-this._width/2) {
this._y = 300-this._width/2;
speedy = speedy*-1*0.8;
}
if (this._y<0+this._width/2) {
this._y = 0+this._width/2;
speedy = speedy*-1*0.8;
}
speedx = speedx*0.99;
speedy = speedy*0.99+0.98;
this._x = this._x+speedx;
this._y = this._y+speedy;
}
}
on (press) {
pickup = 1;
startDrag(this, true);
}
on (releaseOutside) {
pickup = 0;
stopDrag();
}
(例1.3)例1.1のボールを右矢印キーで右に動かしていくと、茶色の四角にぶつかって跳ね返ります。(実行前にウインドウクリックが必要かも)
(A)新学習ポイント1:スプライト(オブジェクト)に名前を付けて、スクリプトで使う。スクリプトをシンボルリストからレイヤーリストに移し、スクリプトを選択(クリックして青くする)するとプロパティウインドウが現れ、オブジェクト名を指定できます。この例では青丸をm、資格をbと名づけました。
(B) 新学習ポイント2:メインのレイヤーリストに乗っているオブジェクトは、“_root.オブジェクト名”で参照できます。すなわち、_rootがメインの床(最下位層)を表し、その上に色々なオブジェクトが置かれています。
(C) 新学習ポイント3:オブジェクト同士の衝突は hitTest メソッドで判定する。
(説明)シンボルリストとレイヤーリストに四角用スプライトが加わりました。また、丸と四角には、それぞれ、mとbというオブジェクト名を付けました。12、13行目が衝突を検出してボールを跳ね返す(左に50移動)部分です。2つのオブジェクトが互いに相手を参照するには、_root. から指定する必要があります。
上の衝突判定は、オブジェクト同士の衝突ですが、
オブジェクト名,hitTest(衝突判定させたいターゲットオブジェクト名);
画面上の点(x、y座標)との衝突指定もできます。
オブジェクト名,hitTest( x, y, true); (trueは当面無視)
マウスボタンとの当たりも検出できます。
オブジェクト名,hitTest( _root.__xmouse, _root.__ymouse, true); (trueは当面無視)
第2章 ボタンに書く
タイムラインを横に伸ばした場合(1章は、伸ばしていない簡単な例でした)、suzuka(flash)は、最優先でタイムラインを左から右へスキャンする処理を繰り返します。
タイムラインのスキャンを強制的に止めたり、スタートさせたりすることができるのは“ボタン”です。ボタンの使い方は次の通りです。
(step1)シンボルリストにボタンの画像を用意
(step2)シンボルリスト(上で右クリック、“アイテムの追加”)に“ボタンを追加”でボタンを用意
このとき、ボタンのプロパティウインドウが現れるので、ボタンの画像を“参照シンボル”で指定。
(step3)ボタンをフレームリストにドラッグする。
この時、ボタンの設置場所を決める。
(step4)ボタンを選択し、画面右下のスクリプト編集でスクリプトを作成
ボタンは、押す、とか放す、とか機能が限られているので、簡易編集というモードが用意されていて便利です。
アクションスクリプトの形式は
on(press){
“ボタンを押した時の処理”
}
といった構造ですが、ボタンの操作はon(press)の他に、on(release),on(releaseOutside),on(rollout),on(rollover),on(dragout),on(dragover)があります。また、“ボタンを押した時の処理”は、基本的にタイムラインの流れの制御ですので、
(1) stop();スキャンを止める、
(2) play();実行
(3) gotoAndPlay(フレーム番号);指定のフレームに飛び、実行
(4) gotoAndStop(フレーム番号);指定のフレームに飛び、そこを実行して停止
(5) prevFrame();前のフレームへ飛ぶ
(6) nextFrame();次のフレームへ飛ぶ
です。
次に3つの例を示します。
(例2.1)ボタンを押すと流れが止まり、ボタンを放すと再スタートします。
(説明)オレンジ色の四角がボタンです。青丸はm.bmpで、これがタイムラインにトゥイーンで、左から右に移動するようにしてあります。ボタンのスクリプトは簡単で、pressでスキャンを止め、releaseで再開させます。
(例2.2)ボタンを押すとある画像、放すと別の画像が表示されます。
2つの画像を別のフレームに用意し、GotoAndStop();で切り替えています。
(説明)sとmという画像を用意し、それぞれフレーム1と2に配置しています。ボタンのpressとreleaseで、それぞれ1フレームと2フレームにジャンプさて、そこで止めています(gotoAndStop)。
最初に2つの画像がパタパタ現れますが、無視してください。
(例2.3)ボタンを押すと数値1が表示されます。
この例題は、テキストの入出力法を紹介する意図があります。テキストの入出力は、次の手順で行います。
(step1)シンボルテーブル上の右クリック(“アイテムの追加”)の“テキスト追加”で(シンボルテーブルに)テキストフィールドを用意
このとき、テキストのプロパティウインドウが開くので、“ダイナミックテキスト”にチェックを入れ、変数名を指定(今回はt にした)。
これにより、変数 t へ書き込んだ内容がテキストボックスに表示される。
(注意!注意!)フォント名を _ で始まるものにしないと表示されないので注意(今回は_ゴシックにした)。
テキストフィールドで入力をしたいときは“テキスト入力”にチェックを入れる。
(step2)シンボルリストのテキストフィールドをレイヤーリストにドラッグ
(step3)この例ではボタンのスクリプトを
on(press){
t=1;
}
としている。
(注)ダイナミックテキストとは、テキストフィールドに変数名を与えることにより、スクリプトでの変数への読み書きの結果がテキストに表示される。
第3章 フレームアクション(アクションフレームレイヤー)にスクリプトを書く
レイヤーリスト領域で右クリックするとフレームアクションレイヤーを挿入できます。フレームアクションレイヤーの各フレームにアクションスクリプトを書くことができます。
suzuka(flash)はタイムラインのスキャンが最優先なので、左から右へフレームをスキャンしつつ、もしフレームアクションレイヤーにスクリプトが書かれていたらそれを実行します。
まず、最初にアクションスクリプトで強引にタイムラインのスキャンの流れを変える例を示します。
http://www.isvalid.jp/actionscriptLab/game/action/hiyo04.html
を参考にしています。
(例3.1)ボールを右に移動させます。
(step1)ボールをレイヤーリスト持ってきてクリックしてmというオブジェクト名前つける。
(step2)アクションの記述
フレームアクションの各フレームには右クリックでキーフレームを挿入することにより、アクションスクリプトを書き込めます。この例では、
フレームアクションのフレーム1:図のmを右に10づつ200まで移動しフレーム3にジャンプ
フレームアクションのフレーム2:gotoAndPlay(_currentframe -
1);1行(左隣のフレームに戻れ)
この例では、gotoAndPlay(1);でもよい
フレームアクションのフレーム3:stop()で停止
この例は、アクションレイヤーの動きを強調するために示した例で、普通は、スキャンの流れをメインに生かしながら、アクションレイヤーで細かな制御を行う場合が多いようです。
(例3.2)2つの図形の移動をトゥイーンで作っておいて、ボタンで交互に動かす。
フレームアクションの1、10、20フレームにキーフレームを用意し、10と20フレーム目にstop();を書き込んでおきます(1には何も書かない)。s、mはトゥイーンで右の方に移動します。ボタンではpressとreleaseで上図のように、1と11フレームに飛ばします。(注:上の図のアクションは、ボタンのアクションであり、フレームアクションのアクションではない)
(例3.3)マウスを追いかけます
フレームアクションの1フレーム目ですべての処理を行います。少し変な感じですが、よく行われる形でもあります。
(解説)setIntervalで40msごとに、関数CursorMovementを実行しています。
CursorMovementでは、マウスの座標(_xmouse, _ymouse)を四角の場所に指定しています。
第4章 高度な技少々
4.1 アクションスクリプトでオブジェクトを発生、消滅させる
Step1:シンボルリストに作りたいムービーの元になるスプライトを用意する。
この時、スプライトのプロパティの“書き出し識別子”と“このシンボルを書き出す”にチェックを入れないといけない。
Step2:メインのレイヤーリストに、ムービーを動かすアクションスクリプトを書く。
例えば、
on(press){
_root.attachMovie("m","m",0);
_root.m._x=100;
_root.m._y=100;
}
onClipEvent(enterFrame){
_root.m._x++;
if(_root.m._x> 200) _root.m.removeMovieClip();
}
(この例は親のスプライト(ボタン)をクリックすると、mという画像(スクリプト)が生成され、右に動く。が、200を超えると消える)
(説明)attachMovie()でオブジェクトを作り、removeMovieClip()でオブジェクトを消している。
(注)メインフレームレイヤーにはmというスプライトがないことに注意
4.2 雪を降らす
http://www.webdesignlibrary.jp/2006/06/flash_snow.php 参照
雪のスプライトを用意し、フレームアクションに以下のアクションを記入。
width = 300;
height = 300;
total = 100;
for (var t = 0; t != total; t++) {
var mc = _root.attachMovie("m", "m"+t, t);
mc._x = (Math.random()*(width+20))-10;
mc._y = (Math.random()*(height+20))-10;
mc.yspeed = (Math.random()*1.75)+0.25;
mc.speed = (Math.random()*3)+2;
mc._xscale = mc._yscale=(mc.speed+mc.yspeed)*10;
mc.onEnterFrame = function() {
var angle = Math.atan2(_root._xmouse-(width/2), _root._ymouse)+1.57;
this._y += Math.sin(angle)*this.speed+this.yspeed;
this._x += Math.cos(angle)*this.speed;
if (this._x>width+10) {
this._x = -10;
} else if (this._x<0-10) {
this._x = width+10;
}
if (this._y>height+10) {
this._y = -10;
} else if (this._y<0-10) {
this._y = height+10;
}
};
}
(オリジナルと少し違うので注意)
ダウンロード(右クリックで保存して下さい)csfファイル